<template>
  <div class="wodedingdan">
    <head_>
      <h1 v-if="$route.params.orderType==$store.state.carStatus[0].status">已归还车辆</h1>
      <h1 v-if="$route.params.orderType==$store.state.carStatus[1].status">未归还车辆</h1>
    </head_>

    <div class="dingdan_list">
      <ul v-for="(item, index) in list" :key="item.id" >
        <li>
          <img :src=item.coverImg alt />
        </li>
        <li>
          <p>租车人：{{ item.username }}</p>
          <p>金额：{{ item.preparidAmount }}</p>
          <p>租车地址：{{ item.address }}</p>
          <p>店铺名：{{ item.sname }}</p>
          <p>开始时间：{{ item.startTime }}</p>
          <p>结束时间：{{ item.endTime }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { queryByMemberCAr } from "../../request/userinfo/userinfo";
  import head_ from "./header";
  export default {
    props: {},
    data() {
      return {
        list: [],
        childlist: null,
        orderType:'',
      };
    },
    methods: {
      go_detail(index) {
        this.$store.state.carinfo=this.childlist[index];
        this.$store.state.carinfo.price=this.childlist[index].totalPrice;
        this.$store.state.order.orderno=this.childlist[index].orderno;
        //this.$store.state.carinfo.id=this.childlist[index].carId;
        sessionStorage.setItem("coverImg",this.$store.state.carinfo.coverImg)
        this.childlist[index].coverImg='';
        //this.$store.state.orderState=$route.params.orderType;
        this.$router.push(`/xiangqing1/${JSON.stringify(this.childlist[index])}`);
      },
    },
    components: {
      head_,
    },
    mounted() {
      queryByMemberCAr({
        memberId: this.$store.state.user.id,
        state: this.$route.params.orderType,
      }).then((res) => {
        if (res.code == 2000) {
          this.list=res.data;
        }
      });
    },
  };
</script>

<style scoped lang="less">
  .wodedingdan {
    width: 100%;
    height: 100%;
    font-size: 0;

    .dingdan_list {
      width: 100%;
      height: 100%;
      background-color: #eeeeee;
      padding: 0.1rem 0;

      ul {
        width: 95%;
        height: 200px;
        background: white;
        margin: 0.2rem auto;
        border-radius: 0.08rem;
        display: flex;
        align-items: center;

        li {
          height: 90%;
        }

        li:nth-child(1) {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            width: 2.2rem;
            height: 1.3rem;
            margin-left: 0.1rem;
          }
        }

        li:nth-child(2) {
          flex: 2;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;

          p {
            padding: 0 0.21rem;
          }

          p:nth-child(1) {
            font-size: 0.23rem;
            color: #666;
          }

          p:nth-child(2),
          p:nth-child(3) {
            font-size: 0.23rem;
            color: #666;
          }
          p:nth-child(4) {
            font-size: 0.23rem;
            color: #666;
          }
          p:nth-child(5) {
            font-size: 0.23rem;
            color: #666;
          }
          p:nth-child(6) {
            font-size: 0.23rem;
            color: #666;
          }
        }
      }
    }
  }
</style>
